import React, { Fragment } from "react"
import clsx from "clsx"
import { View } from "@tarojs/components"
import { SafeArea } from "@taroify/core"
import { pxTransform } from "@tarojs/taro"
import styles from "./index.module.scss"

type IProps = {
  children: React.ReactNode
  className?: string
  /** @default 0 */
  pageGap?: number
}
/**
 * tabbar页面需要使用该组件包裹
 */
const TabbarPlaceholder: React.FC<IProps> = ({ children, className, pageGap = 0 }) => {
  return (
    <Fragment>
      {React.Children.map(children, child => child)}
      <View
        className={clsx(styles.placeholder, className)}
        style={{
          paddingTop: pxTransform(pageGap)
        }}
      >
        <SafeArea position="bottom" />
      </View>
    </Fragment>
  )
}
export default TabbarPlaceholder
